<template>
  <div class="find">
    <van-nav-bar title="搜索页" left-arrow @click-left="$router.go(-1)" />
    <div class="search">
      <van-search
        ref="searchName"
        v-model="value"
        placeholder="音乐、视频、歌词"
        shape="round"
        @search="onSearch"
        @input="onInput"
      />
    </div>
    <van-loading type="spinner" color="#1989fa" v-show="showloading"
      >加载中...</van-loading
    >
    <div class="hotList" v-show="showHotList" v-if="searchList.length == 0">
      <p>热门搜索</p>
      <div class="cell-item">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in hotList"
            :key="index"
            :title="item.searchWord"
            size="large"
            :label="item.content"
            @click=";(value = item.searchWord), onSearch()"
          >
            <span>{{ item.score }}</span></van-cell
          >
        </van-cell-group>
      </div>
    </div>
    <!-- // 搜索出来的结果 -->
    <div class="searchList" v-else>
      <p>最佳匹配</p>
      <div class="cell-item">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in searchList"
            :key="index"
            :title="item.name"
            size="large"
            :label="item.ar[0].name"
            @click="$router.push({ path: '/play', query: { id: item.id } })"
          >
            <template #right-icon>
              <van-icon name="play-circle-o" class="play-icon" />
            </template>
          </van-cell>
        </van-cell-group>
        <p class="chakan" @click="isSongIdClick">
          查看更多{{ this.value }}歌曲
        </p>
      </div>
      <div class="mv-box" v-if="mvList.length != 0">
        <div class="title">
          <h3>mv</h3>
        </div>
        <div
          class="mvImg"
          v-for="(item, index) in mvList"
          :key="index"
          @click="mvClick(index)"
        >
          <img :src="item.imgurl" alt="" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setarchHot, searchMusic, gengSong, songMv, songXiang } from './find'
export default {
  name: 'find',
  data () {
    return {
      value: '',
      hotList: [], //热门列表
      searchList: [], // 搜索列表
      showloading: true,
      showHotList: false,
      mvList: []
    }
  },
  async created () {
    setTimeout(() => {
      this.showloading = false
      this.showHotList = true
    }, 2000)
    let res = await setarchHot()
    console.log(res)
    this.hotList = res.data.data
  },
  methods: {
    async onSearch () {
      let res = await searchMusic({ keywords: this.value })
      console.log(res)
      this.searchList = res.data.result.songs
      // console.log(res.data.result.songs[0].ar[1].id)
      this.$store.commit('getSongId', res.data.result.songs[0].ar[0].id)

      let msg = await songMv({ id: this.$store.state.songId })
      console.log(msg)
      console.log(this.$store.state.songId)
      this.mvList = msg.data.mvs
      // console.log(msg.data.mvs[0].id)

      let arr = []
      for (let i = 0; i < msg.data.mvs.length; i++) {
        // console.log(msg.data.mvs[i].id)
        arr.push(msg.data.mvs[i].id)
      }
      console.log(arr)
      this.$store.commit('getMvId', arr)

      // this.$store.commit('getMvId', msg.data.mvs[0].id)
      let xiangqing = await songXiang({ id: this.$store.state.songId })
      console.log(xiangqing)
    },
    onInput () {
      if (this.value.length == 0) {
        this.searchList = []
      }
    },
    async isSongIdClick () {
      let res = await gengSong({ id: this.$store.state.songId })
      console.log(res)
    },
    mvClick (index) {
      // console.log(this.$store.state.mvId)
      let mvId = this.$store.state.mvId[index]
      this.$router.push({
        path: 'mvfind',
        query: { id: mvId }
      })
      console.log(index)
    }
  }
}
</script>

<style scoped>
.find p {
  font-size: 12px;
  margin-left: 20px;
}
.van-cell__title .van-cell__label {
  width: 150px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.van-loading {
  position: absolute;
  top: 262px;
  left: 130px;
  z-index: 50;
}
.cell-item .van-cell-group {
  background-color: #fff;
}
.chakan {
  text-align: center;
  color: #aeaeae;
}
.title h3 {
  font-size: 16px;
  font-weight: 400;
  margin-left: 40px;
}

.mvImg {
  display: flex;
  padding-bottom: 50px;
}

.mvImg img {
  height: 50%;
  width: 50%;
}
</style>
